import React, { Component } from "react"

/*
  错误边界 让错误值局限在一定的区域
  只能捕获后代组件生命周期产生的错误 不能捕获自己组件产生的作物和其他组件在合成事件、定时器中产生的错误
  只适用于生产环境  不适用于开发环境
*/
export default class ErrorBoumdary extends Component {
  state = {
    hasError: "", // 用于标识子组件是否发生错误
  }
  static getDerivedStateFromError(error) {
    console.log(error)
    return {
      hasError: error,
    }
  }
  componentDidCatch() {
    console.log("渲染组件时出错")
    // 统计错误次数 反馈给服务器 用于通知程序员修改bug
  }
  render() {
    return (
      <div>
        ErrorBoumdary
        {this.state.hasError ? <h2>当前网络不稳定，请稍后再试</h2> : <A></A>}
      </div>
    )
  }
}
class A extends Component {
  state = { name: "qwe" }
  render() {
    return (
      <div>
        A
        {this.state.name.map((p) => {
          return <h1>p</h1>
        })}
      </div>
    )
  }
}
